<template>
  <div class="page-account">
    <div class="page-account-container">
      <div class="page-account-top">
        <div class="page-account-top-logo" style="height: 80px;">
          <!-- <img src="https://pub-conf.oss-cn-shanghai.aliyuncs.com/admin-sparknt-cn/logo.png" alt="logo"> -->
        </div>
      </div>
      <Login ref="form" @on-submit="onSubmit">
        <UserName name="phoneNo" :rules="usernameRules" :maxlength="11" />
        <Password name="password" :rules="passwordRules" />
        <Captcha class="login-captcha" name="vcode" :rules="vcodeRules" :maxlength="4" @on-get-captcha="onChangeVCode"
          :count-down="0" enter-to-submit>
          <template #text>
            <img :src="vCodeUrl" style="height: 80%; vertical-align: middle;">
          </template>
        </Captcha>
        <!-- <div class="page-account-auto-login">
            <Checkbox v-model="remember" size="large">记住密码</Checkbox>
            <a href="">忘记密码</a>
        </div> -->
        <Submit :loading="loading">登录</Submit>
      </Login>
      <!-- <div class="page-account-other">
          <span>其它登录方式</span>
          <img src="@/assets/svg/icon-social-wechat.svg" alt="wechat">
          <img src="@/assets/svg/icon-social-qq.svg" alt="qq">
          <img src="@/assets/svg/icon-social-weibo.svg" alt="weibo">
          <router-link class="page-account-register" :to="{ name: 'register' }">注册账户</router-link>
      </div> -->
    </div>
    <i-copyright />
  </div>
</template>
<script>
import iCopyright from '@/components/copyright'
import { mapActions } from 'vuex'
import Setting from '@/setting'
import { getUrlByPath } from '@/libs/tools'
import { RegExpConst } from '@/constants'

export default {
  name: 'page-account-login',
  components: { iCopyright },
  data() {
    return {
      usernameRules: [
        { required: true, message: '请输入手机号' },
        { ...RegExpConst.phoneNo }
      ],
      passwordRules: [
        { required: true, message: '密码不能为空' }
      ],
      vcodeRules: [
        { required: true, message: '验证码不能为空' }
      ],
      maxLogo: getUrlByPath('logo.png'),
      remember: true,
      vCodeUrl: '',
      loading: false
    }
  },
  created() {
    this.onChangeVCode()
  },
  methods: {
    ...mapActions('admin/account', [
      'login'
    ]),
    onChangeVCode() {
      const prefix = Setting.request.apiBaseURL
      this.vCodeUrl = `${prefix}/login/vcode?r=${Math.random()}`
    },
    onSubmit(valid, values) {
      if (valid) {
        const { phoneNo, password, vcode } = values;
        this.loading = true
        this.login({
          phoneNo,
          password,
          vcode
        }).then((response) => {
          if (response.code === 1000) {
            // 重定向对象不存在则返回顶层路径
            this.$Message.success('登录成功，正在跳转...')
            this.$router.replace(this.$route.query.redirect || '/', () => { });
            // this.$store.dispatch("admin/common/initUserInfo")
            // this.$store.dispatch("admin/common/initPublicConfig", {
            //   domain: 'https://admin.sparknt.cn'
            // }).then(() => {
            //   this.$store.dispatch('admin/menu/refreshMenuList');
            // })
          } else {
            this.$refs.form.formValidate.vcode = ''
            this.onChangeVCode()
          }
        }).catch(e => {
          this.$refs.form.formValidate.vcode = ''
          this.onChangeVCode()
        }).finally(() => {
          setTimeout(() => {
            this.loading = false
          }, 500)
        });
      }
    }
  }
};
</script>
<style lang="less">
@import "../account";
</style>
